<div class="top_menu"><img class="logo" src="assets/images/logo.png"></div>
<div class="container">
<div class="col-md-3"></div>
<div class="panel panel-primary col-md-6" id="logindev">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">找回密码</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                 <form class="form-horizontal" role="form" [formGroup]="formModel" name="signUpForm" (submit)="onSubmit()">
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            用户名：
                        </label>
                        <div class="col-md-8" > 
<input class="form-control" name="username" type="text" placeholder="用户名" [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched" formControlName="username">
                        </div>

                        
                        <div *ngIf="username.invalid && (username.dirty || username.touched)" class="col-md-8 col-md-offset-2">
                           <div class="error" *ngIf="username.errors.required">用户名不可为空</div>
                           <div class="error" *ngIf="username.errors.minlength">用户名最小长度为2位</div>
                           <div class="error" *ngIf="username.errors.maxlength">用户名最大长度为8位</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            邮&ensp;&ensp;箱：
                        </label>
                        <div class="col-md-8" >
                     <input class="form-control" name="email" type="text" placeholder="用户名绑定的邮箱地址" [class.hasError]="formModel.get('email').invalid && formModel.get('email').touched" formControlName="email">
                        </div>
                         <div *ngIf="email.invalid && (email.dirty || email.touched)" class="col-md-8 col-md-offset-2 error">
                                <div class="error" *ngIf="email.errors.required">邮箱不可为空</div>
                                <div class="error" *ngIf="email.errors.email">填入正确邮箱地址</div>
                            </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-8">

                          <a class="btn btn-warning btn-lg col-md-5" style="cursor: pointer"  [routerLink]="['/login']">取&ensp;消</a>
                          <button type="submit" class="btn btn-success btn-lg col-md-5" style="cursor: pointer;float: right;" [disabled]="formModel.invalid">确&ensp;定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div> 

